<template>
  <div>
    <div class="allGoods">
      <SearchBar @del="del" :buttons="buttons" @refresh="refresh" :serachData="serachData"/>
      <hr>
      <tableList 
        :columns="tableCols"
        :data="tableData"
        :operates="operates"
        :enableEdit="true"
        ref="list"
        :isSelection="true"/>
      <pagination :pageData="pageList" @change="pageChange" />
      <addAndEditGoods ref="addAndEditGoods" @refresh="refresh"/>
    </div>
  </div>
</template>
<script>
import tableList from "@/components/index/tableList";
import SearchBar from "@/components/index/SearchBar";
import pagination from "@/components/index/pagination";
import addAndEditGoods from "./addAndEditGoods";
import { findAll,deleteGoods } from "@/js/api/manage";
export default {
  name:'allGoods',
  components:{
    tableList,
    SearchBar,
    pagination,
    addAndEditGoods,
  },
  data(){
    return {
      tableCols: [
        { label: "商品id", prop: "id",width:'70px',sortable: true,edit:false },
        { label: "商家id", prop: "role_id",width:'70px', sortable: true,edit:false,},
        { label: "商品名称", prop: "goods_name",edit:false },
        { label: "商品数量", prop: "goods_nums",width:'80px',edit:false,},
        { label: "商品单价", prop: "goods_price",width:'80px', sortable: true,edit:false,},
        { label: "商品类型", prop: "goods_type",width:'80px', sortable: true,edit:false,},
        { label: "商品规格", prop: "goods_spec",width:'80px',edit:false,},
        { label: "商品数量", prop: "goods_nums",width:'100px', sortable: true,edit:false,},
        { label: "商品描述", prop: "goods_describe",edit:false,},
        { label: "上架时间", prop: "goods_launch_time", sortable: true,edit:false,},
        { label: "商品状态", prop: "state",width:'90px', sortable: true,edit:false,
          render(h,params) {
            return h('el-tag',{
              props: {
                type:params.row.state ? "success" : "info"
              }
            },params.row.state ? "上架" : "已下架")
          }, 
        },
      ],
      tableData:[],
      operates: {
        width: 100,
        list: [
          {
            id: "1",
            label: "修改",
            type: "text",
            show: true,
            disabled: false,
            size: "small",
            method: (index, row) => {
              this.$refs.addAndEditGoods.edit(row,index)
            },
          },
          {
            id: "2",
            label: "删除",
            type: "text",
            show: true,
            disabled: false,
            size: "small",
            method: (index, row) => {
              this.utils.tips.confirm("确定删除吗？",val=>{
                if(val){
                  deleteGoods(row.id).then(response=>{
                    if(response.data.state){
                      this.utils.tips.success(response.data.msg)
                    }else{
                      this.utils.tips.error(response.data.msg)
                    }
                    this.loadList()
                  })
                }
              })
            },
          }
        ],
      },
      buttons:[
        {
          label: "新增商品",
          icon: "el-icon-plus",
          size:'mini',
          type:"primary",
          method: () => {
            this.$refs.addAndEditGoods.add()
          }
        },
        {
          label: "删除",
          icon: "el-icon-delete",
          size:'mini',
          type:"primary",
          method: data => {
            console.log(data);
          }
        },
      ],
      pageList:{pageSize:6,pageNo:1,total:0},
      selectRows:[],
      serachData:["id","role_id","goods_name","goods_type","state"],
    }
  },
  created(){
    this.loadList()
  },
  methods:{
    del(){
      if(this.selectRows.length>0){
        this.utils.tips.confirm("确定要删除吗？",(val)=>{
          if(val){
            let ids = []
            for(let i of this.selectRows){
              ids.push(i.id)
            }
            this.deleteData(ids)
          }
        })
      }
    },
    pageChange(val){
      if(val.pageNo!=""){
        this.pageList = val
      }
      this.loadList()
    },
    deleteData(ids){
      for(let i of ids){
        this.tableData = this.tableData.filter(item => {
          return item.id!=i
        });
      }
      this.$refs.list.clearSelect()
    },
    loadList(){
      let obj = {
        pageSize:this.pageList.pageSize,
        pageNo:this.pageList.pageNo,
        search:this.condition
      }
      findAll(obj).then(response=>{
        if(response.data.state){
          this.tableData = response.data.data.list
          this.pageList.pageNo = response.data.data.pageNo
          this.pageList.pageSize = response.data.data.pageSize
          this.pageList.total = response.data.data.totalRecords
        }
      })
    },
    pay(){
      if(this.selectRows.length!=0){
        this.$router.push({name: 'shoppingConfirm'});
      }else{
        this.utils.tips.warning("您还未选择购买哪件商品")
      }
    },
    goBack(){
      this.$router.go(-1)
    },
    refresh(val){
      this.condition = val
      this.loadList()
    },
    handleSelect(val){
      this.selectRows = val == undefined ? [] : val
    },
  }
}
</script>

<style lang="less">
.allGoods{
  min-height: 500px;
  margin-top: 20px;
}
</style>